<template>


  <el-dialog :title="'角色' + (type == 'add'?'添加':'编辑' )"  :visible="visible" @close="visible = false">
    <el-form :model="form" label-width="80px">
      <el-form-item label="角色名">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="权限">
        <func-select v-model="form.funs" url="/api/v1/sys/role/allfn"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.description"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="onOk">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import axios from '@/util/axios'

  import FuncSelect from "@/components/FuncSelect";

  const form = () =>{
    return {
      funs:[]
    }
  }

  export default {

    components:{FuncSelect},

    data(){
      return {
        type:'add',
        loading:false,
        visible:false,
        form:form()
      };

    },

    methods: {

      onOk(){
        this.loading = true;
        const exec = (this.type == 'add') ? axios.put :axios.patch;
        exec('/api/v1/sys/role',axios.form(this.form))
        .then(() =>{
          this.$message.success(((this.type == 'add') ? '添加':'修改') + '成功');
          this.loading = false;
          this.$emit('success');
          this.visible = false;
        })
        .catch(e => this.loading = false);
      },

      add() {
        this.visible = true;
        this.type = 'add';
        this.form = form();
      },

      edit(id) {
        this.visible = true;
        this.type = 'edit';
        axios.get(`/api/v1/sys/role/get/${id}`)
        .then(({data}) => {
          this.form = data;
        });
      }

    }
  }
</script>

